<template>
	<view class="content">
		<view class="row b-b">
			<text class="tit">账户类型</text>
			<picker class="input" @change="bindPickerChange" :value="bankdata.typeid" :range="typeid_array">
				<view class="uni-input">{{typeid_array[bankdata.typeid]}}</view>
			</picker>
		</view>
		<view class="row b-b" v-if="bankdata.typeid == 0">
			<text class="tit">开户银行</text>
			<input 
				class="input"
				type="text"
				:value="bankdata.bankname" 
				placeholder="请输入开户银行" 
				placeholder-class="placeholder"
				data-key="bankname" 
				@input="inputChange" 
			/>
		</view>
		<view class="row b-b">
			<text class="tit">姓名</text>
			<input
				class="input"
				type="text"
				:value="bankdata.username"
				placeholder="请输入真实姓名"
				placeholder-class="placeholder"
				maxlength="20"
				data-key="username"
				@input="inputChange"
			/>
		</view>
		<view class="row b-b">
			<text class="tit">账号</text>
			<input
				class="input"
				type="text"
				:value="bankdata.bankno"
				placeholder="请输入账号"
				placeholder-class="placeholder"
				maxlength="30"
				data-key="bankno"
				@input="inputChange"
			/>
		</view>
		<view class="row default-row">
			<text class="tit">设为默认</text>
			<switch :checked="bankdata.isdefault == 1" color="#fa436a" @change="switchChange" />
		</view>

		<button class="add-btn" @click="confirm" :disabled="submiting">提交</button>
	</view>
</template>

<script>
import pickRegions from '@/components/pick-regions/pick-regions.vue';

export default {
	components: {
		pickRegions
	},
	data() {
		return {
			token: '',
			manageType: 'add',
			submiting: false,
			typeid_array: ['储蓄卡'],
			bankdata: {
				id: 0,
				typeid: 0,
				username: '',
				bankname: '',
				bankno: '',
				isdefault: 1
			}
		};
	},
	computed: {
		
	},
	onLoad(option) {
		console.log('option', option);
		
		if(option.type && option.type != undefined){
			this.manageType = option.type;
		}
		
		this.token = this.$api.get('token');
		if (!this.token) {
			uni.navigateTo('/pages/public/login');
		}

		let title = '新增收款账户';
		if (option.type === 'edit') {
			title = '编辑收款账户';
			if(option.data){
				this.bankdata = JSON.parse(option.data);
			}
		}
		
		uni.setNavigationBarTitle({
			title
		});
		
	},
	methods: {
		inputChange(e) {
			const key = e.currentTarget.dataset.key;
			this.bankdata[key] = e.detail.value;
		},
		bindPickerChange: function(e) {
			console.log('picker发送选择改变，携带值为', e.target.value);
			this.bankdata.typeid = e.target.value;
			this.bankdata.bankname = '';
		},
		switchChange(e) {
			this.bankdata.isdefault = e.detail.value ? 1 : 0;
		},
		//提交
		confirm() {
			this.submiting = true;
			
			/* 数据验证模块*/
			if(this.bankdata.typeid == 0){
				if (!/^[\u4e00-\u9fa5]{2,15}$/.test(this.bankdata.bankname)) {
					this.$helper.toast('开户银行格式错误','','/static/toast/fail-circle.png');
					this.submiting = false;
					return;
				}
			}
			if (!/^[\u4e00-\u9fa5]{2,4}$/.test(this.bankdata.username)) {
				this.$helper.toast('姓名格式错误','','/static/toast/fail-circle.png');
				this.submiting = false;
				return;
			}
			if (!/^[-_@.0-9a-z]{1,}$/.test(this.bankdata.bankno)) {
				this.$helper.toast('账号格式错误','','/static/toast/fail-circle.png');
				this.submiting = false;
				return;
			}
			
			const param = {};
			param.token = this.token;
			param.typeid = this.bankdata.typeid;
			param.bankname = this.bankdata.bankname;
			param.username = this.bankdata.username;
			param.bankno = this.bankdata.bankno;
			param.isdefault = this.bankdata.isdefault;
			if(this.manageType == 'add'){
				console.log('param', param);
				//账户添加
				this.$http.request('User', 'bankadd', 'POST', param, (res) => {
					console.log('User/bankadd', res);
					this.submiting = false;
					if (res.status == 1) {
						if (res.data.error == 0) {
							this.$helper.toast('账户添加成功','sucess');
							//返回前一页
							setTimeout(()=>{
								uni.navigateBack();
							}, 800);
						}
					}
				});
				
			}else{
				//账户修改
				param.id = this.bankdata.id;
				console.log('param', param);
				this.$http.request('User', 'bankedit', 'POST', param, (res) => {
					console.log('User/bankedit', res);
					this.submiting = false;
					if (res.status == 1) {
						if (res.data.error == 0) {
							this.$helper.toast('账户修改成功','sucess');
							//返回前一页
							setTimeout(()=>{
								uni.navigateBack(1);
							}, 800);
						}
					}
				});
				
			}
		}
	}
};
</script>

<style lang="scss">
page {
	background: $page-color-base;
	padding-top: 16upx;
}

.row {
	display: flex;
	align-items: center;
	position: relative;
	padding: 0 30upx;
	height: 110upx;
	background: #fff;

	.tit {
		flex-shrink: 0;
		width: 150upx;
		font-size: 30upx;
		color: $font-color-dark;
	}
	.input {
		flex: 1;
		font-size: 30upx;
		color: $font-color-dark;
	}
	.icon-shouhuodizhi {
		font-size: 36upx;
		color: $font-color-light;
	}
	h2 {
		font-size: 30upx;
	}
	h3 {
		font-size: 30upx;
	}
}
.default-row {
	margin-top: 16upx;
	.tit {
		flex: 1;
	}
	switch {
		transform: translateX(16upx) scale(0.9);
	}
}
.add-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 690upx;
	height: 80upx;
	margin: 60upx auto;
	font-size: $font-lg;
	color: #fff;
	background-color: $base-color;
	border-radius: 10upx;
	box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
}
</style>
